<template>
  <div>
    <Row :gutter="14" type="flex">
      <Col :sm="18" :xs="24">
        <StatusPart :funs="funs" :page="page" :filterOr="filterOr"></StatusPart>
        <br>
        <Page
          :current.sync="page.page_num"
          :total="page.page_total"
          :page-size="page.page_size"
          @on-page-size-change="page.page_size=$event;funs.update()"
          @on-change="funs.update()"
          show-sizer
        />
      </Col>
      <Col :sm="6" :xs="0">
        <Card>
          <p slot="title">筛选</p>
          <ScreenPart :struct="screenData"></ScreenPart>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import StatusPart from "_c/StatusPart";
import ScreenPart from "_c/ScreenPart";

export default {
  name: "Status",
  components: { StatusPart, ScreenPart },
  data() {
    return {
      funs: {},
      page: {
        page_num: 1,
        page_total: 1,
        page_size: 1
      },
      filterOr: [],
      screenData: {
        select: {
          label: "选择列表",
          name: "se1",
          placeholder: "请选择",
          value: "problem_id",
          options: [
            {
              value: "problem_id",
              label: "题号"
            },
            {
              value: "username",
              label: "账号"
            }
          ]
        },
        input: {
          name: "in1",
          placeholder: "请输入",
          value: ""
        },
        button: {
          type: "default",
          value: "筛选",
          onClick: e => {
            const is_likes = { problem_id: 0, username: 1 };
            this.funs.update();
            this.filterOr[0] = {
              field: e.select.value,
              text: e.input.value,
              is_like: is_likes[e.select.value]
            };
          }
        }
      }
    };
  },
    mounted() {
    this.funs.update();
  },
};
</script>

<style lang="less" scoped>
</style>